<template>
  <div class="menu-list">
    <el-menu
        class="my-menu"
        :default-active="activePath"
        :collapse="isCollapse"
    >
      <el-menu-item index="/admin/" @click="handleMenuClick">
        <el-icon><ElIconList/></el-icon>
        <template #title>
          <span>控制台</span>
        </template>
      </el-menu-item>
      <el-menu-item index="/admin/book/bookMgr"  @click="handleMenuClick">
        <el-icon><ElIconReading/></el-icon>
        <template #title>
          <span>图书管理</span>
        </template>
      </el-menu-item>
      <el-menu-item index="/admin/book/bookCategoryMgr"  @click="handleMenuClick">
        <el-icon><ElIconLocation/></el-icon>
        <template #title>
          <span>图书分类</span>
        </template>
      </el-menu-item>
      <el-menu-item index="/admin/book/bookRentMgr"  @click="handleMenuClick">
        <el-icon><ElIconChatRound/></el-icon>
        <template #title>
          <span>租借管理</span>
        </template>
      </el-menu-item>
      <el-menu-item index="/admin/book/bookSuggestionMgr"  @click="handleMenuClick">
        <el-icon><ElIconLollipop/></el-icon>
        <template #title>
          <span>荐书清单</span>
        </template>
      </el-menu-item>
      <el-menu-item index="/admin/cms/cmsCategoryMgr"  @click="handleMenuClick">
        <el-icon><ElIconCamera/></el-icon>
        <template #title>
          <span>站点信息分类</span>
        </template>
      </el-menu-item>
      <el-menu-item index="/admin/cms/cmsInformationMgr"  @click="handleMenuClick">
        <el-icon><ElIconCoffee/></el-icon>
        <template #title>
          <span>站点内容管理</span>
        </template>
      </el-menu-item>
      <!--
      <el-menu-item index="/admin/cms/cmsTemplateConfigMgr"  @click="handleMenuClick">
        <el-icon><ElIconIceCream/></el-icon>
        <template #title>
          <span>模板管理</span>
        </template>
      </el-menu-item>
      -->
      <el-menu-item index="/admin/system/systemDepartmentMgr"  @click="handleMenuClick">
        <el-icon><ElIconOfficeBuilding/></el-icon>
        <template #title>
          <span>单位管理</span>
        </template>
      </el-menu-item>
      <el-menu-item index="/admin/system/systemUserMgr"  @click="handleMenuClick">
        <el-icon><ElIconUser/></el-icon>
        <template #title>
          <span>用户管理</span>
        </template>
      </el-menu-item>
    </el-menu>

    <div class="menu-handle" @click="handleToggleMenu()">
      <el-icon><ElIconArrowRight/></el-icon>
      {{ getCollapseDesc() }}
    </div>
  </div>
</template>

<script setup lang="ts">

import {useRoute} from "#imports";

const props = defineProps<{
  menuClick : Function,
}>();

const isCollapse = ref(false);
const activePath = useRoute().path;
const handleToggleMenu = ()=>{
  isCollapse.value = !isCollapse.value;
}

const getCollapseDesc = ()=>{
  return isCollapse.value ? "展开" : "收起菜单";
}

const handleMenuClick = (menu: any) => {
  if(props.menuClick){
    props.menuClick(menu.index);
  }
}

</script>

<style scoped>

.menu-list{
  height: 100%;
  margin-top: 3px;
}

.my-menu{
  height: calc(100vh - 47px);
}

.menu-handle{
  width: 100%;
  height: 30px;
  background: #eeeeee;
  cursor: pointer;
  position: relative;
  bottom: 0;
  color: var(--second-background);
  margin-top: -35px;
  line-height: 35px;
}

</style>
